<template>
	<view class="content" :style="{ backgroundImage: `url(${bgImage})` }">
		<swiper class="swiper" :indicator-dots="false" @change="changeSwiper" :current="1">
			<swiper-item class="swiperCon">
				<!-- <view class="con-title">童年造物</view> -->
					<image src="../../static/logo1.png" style="width: 120px;height: 15px;margin-top: 40px;" mode="aspectFit"></image>
				<view class="con-mid">
					<view class="mid-head">
						<image style="width: 54px;height:54px;" src="../../static/weather/3.png"></image>
						<view class="head-right">
							<view>
								{{day.month}}月{{day.date}}日 {{weekDays[new Date().getDay()]}}
							</view>
							{{day.tempture}}℃ {{day.cloud}} {{day.wind}}
						</view>
					</view>
					<view class="mid-clock">
						{{new Date().getHours().toString().padStart(2, '0')}} :
						{{new Date().getMinutes().toString().padStart(2, '0')}}
					</view>
					<view class="con-menu">
						<view class="menu-label">
							<image style="width:20px;height: 20px;margin-right: 20rpx ;"
								src="../../static/icon/tonghuaL.png"></image>
							<view>通话</view>
						</view>
						<view class="menu-label">
							<image style="width:18px;height: 18px ;margin-right: 20rpx;"
								src="../../static/icon/jiluL.png"></image>
							<view>通讯录</view>
						</view>
					</view>
					<view class="con-btm">
						<view v-for="(item,index) in useList" :key="index" @click="goDetail(item.url)">
							<view :style="{background:`${item.bgColor}`}" class="btm-label">
								<image :src="item.icon"></image>
								{{item.title}}
							</view>
						</view>
					</view>
					<view style="font-size: 40rpx;position: absolute;bottom: 20rpx;margin:0 auto;width: 100%;">常用功能
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<!-- <view class="con-title">童年造物</view> -->
				<image src="../../static/logo1.png" style="width: 120px;height: 15px;margin-top: 40px;" mode="aspectFit"></image>
				<!-- 普通模式 -->
				<view v-if="typeIndex == 1" class="conF">
					<!-- 	<view class="circle-container">
						<view v-for="(item,index) in menuList.slice(1)" :key="index" class="circle-item" :style="getAngle(index)"
							@touchstart.prevent.stop="handleTouchStart($event)"
							@touchmove.prevent.stop="handleTouchMove($event)"
							@touchend.prevent.stop="handleTouchEnd($event,item.url)">
							<view class="circle " :style="{background:`${item.bgColor}`}"
								:class="{'active':swiperIndex == index}" @click.stop="goDetail(item.url)">
								<view>
									<text v-show="index == 1||index == 2||index==3||index==4||index==12||index==36"
										style="margin: 0 4px 0 0;font-size: 56rpx;">AI</text>
									<text v-show="index==8">1s</text>
									<image :src="item.icon" style="width: 24px;height: 24px;"></image>
								</view>

								<view style="font-size: 54rpx;">{{item.title}}</view>
							</view>
						</view>
					</view> -->

					<!-- swiper轮播 -->
					<swiper class="swiperBox" previous-margin="250rpx" next-margin='250rpx' @change="swiperChange"
						circular current="0">
						<swiper-item class="swiperItem" v-for="(item,index) in menuList.slice(1)" :key="index">
							<view class="circle swiperWrap" :style="{background:`${item.bgColor}`}"
								:class="{'active':swiperIndex == index}" @click="goDetail(item.url)">
								<view>
					<!-- 				<text v-show="index == 2||index==3||index==4||index==5||index==6||index==7"
										style="margin: 0 4px 0 0;">AI</text> -->
									<text v-show="index==17">1s</text>
									<image :src="item.icon" style="width: 27px;height: 27px;"></image>
								</view>
								<view style="font-size: 19px;">{{item.title}}</view>
							</view>
						</swiper-item>
					</swiper>

					<view style="position: absolute;left: 50%;transform: translate(-50%, 0%); bottom: 0">
						<image src="../../static/logo.png"
							style="width: 95px;height:130px;display: block"
							@click="goAssitant"></image>
						<view style="background-color: #1a1a1a;border-radius: 20rpx 20rpx 0 0;width: 60px;margin: 0 auto;">AI助理</view>
					</view>

				</view>
				<!-- 宫格模式 -->
				<view v-if="typeIndex == 2" class="conS">
					<view class="con-label">
						<view v-for="(item,index) in menuList.slice(0, -1)" :key="index">
							<view style="text-align:center;" @click="goDetail(item.url)">
								<view :style="{background:`${item.bgColor}`}" class="circle">
									<image :src="item.icon" style="width: 45px;height: 45px;vertical-align: bottom;"
										mode="aspectFit">
									</image>
								</view>
								<view style="display: flex;align-items: center;justify-content: center;">
							<!-- 		<text
										v-show="index == 0||index == 3||index==4||index==5||index==6||index==7||index==8"
										style="margin: 0 4px 0 0;font-size: 38rpx;">AI</text> -->
									<text v-show="index==18">1s</text>
									<view style="font-size: 40rpx;">{{item.title}}</view>
								</view>

							</view>
						</view>
					</view>
					<view @click="goList(3)" class="con-btn">列表模式</view>
				</view>
				<!-- 列表模式 -->
				<view class="conT" v-if="typeIndex == 3">
					<view class="con-label">
						<view v-for="(item,index) in menuList.slice(0, -1)" :key="index">
							<view class="circle" @click="goDetail(item.url)">
								<view style="display: flex;align-items: center;">
									<image :src="item.icon"
										style="width:45px;height: 45px;vertical-align: middle;margin: 0 30rpx 0 0;padding:30rpx;border-radius: 50%;"
										:style="{background:`${item.bgColor}`}" mode="aspectFit"></image>

							<!-- 		<text
										v-show="index == 0||index == 3||index==4||index==5||index==6||index==7||index==8"
										style="margin: 0 4px 0 0;">AI</text> -->
									<text v-show="index==8">1s</text>

								</view>
								<view>{{item.title}}</view>
							</view>
						</view>
					</view>
					<view @click="goList(1)" class="con-btn">普通模式</view>
				</view>
			</swiper-item>
		</swiper>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImage: '', // 背景图片
				menuList: [{
						title: "AI助理",
						icon: "../../static/logo.png",
						url: "/pages/index/assitant",
						bgColor: "linear-gradient(to bottom, #3e9090, #357b7b)",
					}, {
						title: "课表",
						icon: "../../static/icon/jihua.png",
						url: "/pages/plan/index",
						bgColor: "linear-gradient(to bottom, #4cadad, #54bcbd)",
					},
					{
						title: "微聊",
						icon: "../../static/icon/weiliao.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #2c9041, #37b352)",
					}, {
						title: "AI故事",
						icon: "../../static/icon/gushi.png",
						url: "/pages/story/index",
						bgColor: "linear-gradient(to bottom, #4a129f, #3b0e7b)",
					}, {
						title: "AI诗词",
						icon: "../../static/icon/shici.png",
						url: '/pages/story/tabulation?type=2',
						bgColor: "linear-gradient(to bottom, #296b96, #215476)",
					}, {
						title: "AI音乐",
						icon: "../../static/icon/yinyue.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #e33ab1, #fb41c3)",
					}, {
						title: "AI视频",
						icon: "../../static/icon/shipin.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #2c709e, #215476)",
					}, {
						title: "相机",
						icon: "../../static/icon/xiangji.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #cf8a3a, #e99d42)",
					}, {
						title: "相册",
						icon: "../../static/icon/xiangce.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #be7328, #9c5f21)",
					}, {
						title: "通话",
						icon: "../../static/icon/tonghua.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #31a24a, #37b352)",
					}, {
						title: "通讯录",
						icon: "../../static/icon/lu.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #6b932a, #567722)",
					}, {
						title: "通话记录",
						icon: "../../static/icon/record.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #000c94, #000a7b)",
					}, {
						title: "拨号",
						icon: "../../static/icon/bohao.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #739f30, #81b337)",
					}, {
						title: "短信",
						icon: "../../static/icon/msg.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #309f48, #37b352)",
					}, {
						title: "计算器",
						icon: "../../static/icon/jisuanqi.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #3074a1, #347caf)",
					}, {
						title: "计步",
						icon: "../../static/icon/jibu.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #83141a, #641013)",
					}, {
						title: "运动",
						icon: "../../static/icon/yundong.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #0c36ce, #0f40f5)",
					}, {
						title: "运动记录",
						icon: "../../static/icon/yundongjilu.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #ac2c20, #bd3124)",
					}, {
						title: "分钟",
						icon: "../../static/icon/fenzhong.png",
						url: "/pages/timer/index",
						bgColor: "linear-gradient(to bottom, #abab36, #bfbf3d)",
					}, {
						title: "秒表",
						icon: "../../static/icon/miao.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #d08a3a, #e99d42)",
					}, {
						title: "闹钟",
						icon: "../../static/icon/nao.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #000c94, #000a7b)",
					}, {
						title: "表盘组件",
						icon: "../../static/icon/zujian.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #af8d36, #cba43f)",
					}, {
						title: "天气",
						icon: "../../static/icon/tianqi.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #99952d, #817f26)",
					}, {
						title: "日历",
						icon: "../../static/icon/rili.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #7db4cf, #93d2f3)",
					}, {
						title: "录音",
						icon: "../../static/icon/luyin.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #3a8cc3, #347caf)",
					}, {
						title: "魔法相机",
						icon: "../../static/icon/xiangji.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #461195, #3b0e7b)",
					}, {
						title: "疯狂数学",
						icon: "../../static/icon/shuxue.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #618626, #567722)",
					}, {
						title: "绑定信息",
						icon: "../../static/icon/bangding.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #0c39d9, #0f40f5)",
					}, {
						title: "喜马拉雅",
						icon: "../../static/icon/ximalaya.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #c57529, #b36c26)",
					}, {
						title: "百度网盘",
						icon: "../../static/icon/baidu.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #afaf37, #bfbf3d)",
					}, {
						title: "清理工具",
						icon: "../../static/icon/clear.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #8d5d26, #744e20)",
					}, {
						title: "支付宝",
						icon: "../../static/icon/zhifubao.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #0d3be2, #0f40f5)",
					}, {
						title: "应用商城",
						icon: "../../static/icon/shop.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #b18f37, #9b7d31)",
					}, {
						title: "设置",
						icon: "../../static/icon/shezhi.png",
						url: "",
						bgColor: "linear-gradient(to bottom, #000d9f, #000a7b)",
					},
					// {
					// 	title: "绘本",
					// 	icon: "../../static/icon/huiben.png",
					// 	url: "",
					// 	bgColor: "linear-gradient(to bottom, #7f7fbf, #aaaaff)",
					// },
					// {
					// 	title: "屏幕录制",
					// 	icon: "../../static/icon/luzhi.png",
					// 	url: "",
					// 	bgColor: "linear-gradient(to bottom, #598ab5, #72b0e9)",
					// }, {
					// 	title: "微信",
					// 	icon: "../../static/icon/weixin.png",
					// 	url: "",
					// 	bgColor: "linear-gradient(to bottom, #7cba00, #aaff00)",
					// }, {
					// 	title: "浏览器",
					// 	icon: "../../static/icon/liulanqi.png",
					// 	url: "",
					// 	bgColor: "linear-gradient(to bottom, #dcc300, #ffe200)",
					// }, {
					// 	title: "咪咕音乐",
					// 	icon: "../../static/icon/migu.png",
					// 	url: "",
					// 	bgColor: "linear-gradient(to bottom, #c88500, #ffaa00)",
					// },
					{
						title: "宫格模式",
						icon: "../../static/icon/rili.png",
						url: "changeType",
						bgColor: "linear-gradient(to bottom, #3d2810, #744e20)",
					}
				],
				swiperIndex: 0,
				rotation: 17, // 摩天轮的整体旋转角度
				lastTouchX: 0, // 上次触摸的X坐标  
				isDragging: false, // 是否正在拖动  
				startX: 0, // 触摸开始时的X坐标  
				startY: 0, // 触摸开始时的Y坐标
				startStamp: null,
				typeIndex: 1,
				day: {
					wind: "微风",
					cloud: "多云",
					tempture: 20,
					month: new Date().getMonth() + 1,
					date: new Date().getDate()
				},
				weekDays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
				useList: [{
					title: "计划",
					icon: "../../static/icon/jihua.png",
					url: "/pages/plan/index",
					bgColor: "linear-gradient(to bottom, #dcc300, #ffe200)",
				}, {
					title: "故事",
					icon: "../../static/icon/gushi.png",
					url: "/pages/story/index",
					bgColor: "linear-gradient(to bottom, #7cba00, #aaff00)",
				}, {
					title: "音乐",
					icon: "../../static/icon/yinyue.png",
					url: "",
					bgColor: "linear-gradient(to bottom, #81c2c2, #aaffff)",
				}, ],
				contentViewHeight:0
			}
		},
		onLoad() {},
		created() {
			this.contentViewHeight = uni.getSystemInfoSync().windowHeight - 120
		},
		methods: {
			getAngle(index) {
				const radius = 170; // 圆的半径  
				const baseAngle = index * 36; // 每个元素的基础角度  
				const totalAngle = (baseAngle + this.rotation) * Math.PI / 180; // 计算旋转后的总角度   
				return {
					// transform: `rotate(${(baseAngle + this.rotation)}deg) translateX(${radius}px)`,
					transform: `rotate(${totalAngle}rad) translate(${radius}px) rotate(${-totalAngle}rad)`,

				};
			},
			handleTouchStart(event) {
				this.startX = event.touches[0].clientX; //初始X轴
				this.startY = event.touches[0].clientY; //初始Y轴
				this.isDragging = true;
				this.startStamp = event.timeStamp
			},
			handleTouchMove(e) {
				if (!this.isDragging) return;
				const moveX = event.touches[0].clientX - this.startX;
				const moveY = event.touches[0].clientY - this.startY;
				this.rotation = (this.rotation + moveX);
				// this.startX = event.touches[0].clientX;
				// this.startY = event.touches[0].clientY;
			},
			handleTouchEnd(event, url) {
				this.isDragging = false;
				if (Math.abs(event.changedTouches[0].clientX - this.startX) < 10 && Math.abs(event.changedTouches[0]
						.clientY - this.startY) < 10 && event.timeStamp - this.startStamp < 1000) {
					this.goDetail(url)
				}
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
			goDetail(url) {
				if (url) {
					if (url == 'changeType') {
						this.typeIndex = 2
					} else(
						uni.navigateTo({
							url: url
						})
					)
				}
			},
			goList(i) {
				this.typeIndex = i
			},
			goAssitant() {
				uni.navigateTo({
					url: "/pages/index/assitant"
				});
			},
			changeSwiper(e) {
				console.log(555, e)
				if (e.detail.current == 0) {
					this.bgImage = ""
				} else {
					this.bgImage = ''
				}
			}
		},

	}
</script>
<style>
	.swiperWrap {
		transform: scale(0.9);
		background-color: rgb(0, 0, 0, 0.5);
		transition: transform 0.2s ease !important
	}

	.swiperWrap.active {
		transform: scale(1);
		/* box-shadow: 0px 0px 30rpx #f8f8f8; */
		margin: 0 0 74rpx 0;
		transition: transform 0.2s ease !important
	}

	.swiperItem {
		display: flex;
		justify-content: center;
		align-items: center;
		transition: transform 0.2s ease
	}

	.swiper {
		min-height: 100vh;
	}

	uni-swiper-item {
		overflow: auto;
	}
	uni-swiper{
		height: 174px;
	}
</style>
<style lang="scss" scoped>
	.content {
		background-size: cover;
		/* 确保图片覆盖整个元素 */
		background-position: center;
		/* 将图片居中显示 */
		min-height: 100vh;
		/* 确保至少为视口高度 */
		color: #fff;
		text-align: center;
		background-size: cover;
		/* 使背景图适应容器 */
		background-position: center;
		/* 图片居中 */

		.con-title {
			padding: 20rpx 0 0 0;
			color: #c7c7c7;
		}

		.con-mid {


			.mid-head {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.mid-clock {
				font-size: 46px;
			}
		}

		.con-menu {
			display: flex;
			justify-content: space-evenly;

			.menu-label {
				padding: 26rpx 0;
				background-color: RGB(51, 51, 51);
				display: flex;
				align-items: center;
				width: 100px;
				border-radius: 20rpx;
				justify-content: center;
			}
		}

		.con-btm {
			display: flex;
			justify-content: space-around;
			margin-top: 26rpx;
			background-color: RGB(51, 51, 51);
			padding: 10rpx 0;

			.btm-label {
				width: 65px;
				height: 65px;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			image {
				width: 20px;
				height: 20px;
			}

		}

		.conF {
			.circle {
				border-radius: 50%;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 98px;
				height: 98px;
			

			}

			.swiperBox {
				display: flex;
			}


			.carousel-container {
				height: 200px;
				/* 摩天轮的高度，根据需要调整 */
				position: relative;
				margin: auto;
				overflow: hidden;

			}

			.carousel {
				position: absolute;
				width: 300px;
				/* 摩天轮直径 */
				height: 300px;
				/* 与直径相同，保持圆形 */
				// bottom: -80px;
				top: 420px;
			}

			.menuCon {
				font-size: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			.car {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 70px;
				/* 座舱宽度 */
				height: 70px;
				/* 座舱高度 */
				margin-left: -30px;
				/* 居中 */
				margin-top: -40px;
				/* 居中 */

				border-radius: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: transform 0.2s ease;
				/* 平滑过渡效果 */
				color: #fff;
				/* font-size: 32rpx; */
				text-align: center;
				box-shadow: 0 0 8px #fff;
			}

			.car-content {
				font-size: 16px;
				color: #333;
			}

		}



		.conS {
			padding: 20rpx 25rpx;

			
			.con-label {
				display: flex;
				flex-wrap: wrap;
				
			}

			.circle {
				border-radius: 50%;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width:85px;
				height: 85px;
				margin: 16rpx;
				// box-shadow: 0 0 8px #a7a7a7;
			}

			.con-btn {
				background-color: RGB(130, 130, 130, 0.4);
				padding: 10rpx;
				width: 80px;
				text-align: center;
				border-radius: 50rpx;
				margin: 0 auto;
			}

		}

		.conT {
			padding: 20rpx 20rpx;


			.circle {
				display: flex;
				align-items: center;
				padding: 4rpx 20rpx;
				// border-bottom: 1px solid #d0d0d0;
				// box-shadow: 0 0 8px #a7a7a7;
			}

			.con-btn {
				background-color: RGB(130, 130, 130, 0.4);
				padding: 10rpx;
				width: 80px;
				text-align: center;
				border-radius: 50rpx;
				margin: 20rpx auto;
			}
		}


	}
</style>
<style>
	.circle-container {
		position: absolute;
		width: 100%;
		/* height: 200px; */
		overflow: hidden;
		padding: 180px 82px 0px;
		/* padding: 40px 30px 73px; */
		/* left: 26px; */
		margin: 0 auto;
	}

	.circle-item {
		position: absolute;
		border-radius: 50%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: white;
		transform-origin: 93px 149px;
		/* box-shadow: 0 0 8px RGB(255, 255, 255, 0.3); */
	}
</style>